<template>
  <div class="word_box">
    <!-- 歌名-歌手 -->
    <div class="song_name">
      {{ $store.state.song_name }} -
      <span class="singer">{{ $store.getters.singer }}</span>
    </div>
    <!-- 歌词 -->
    <div class="song_word">
      <div
        ref="lyric"
        :style="`transform: translateY(${-(offset - 2) * 28}px)`"
        class="word_translate"
      >
        <div
          @click="to_lyric(idx)"
          :class="idx == offset ? 'act_style' : ''"
          class="words"
          v-for="(lyric, idx) in medisArray"
          :key="idx"
        >
          {{ lyric.c }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import nearNumber from "@/util/nearNumber";
export default {
  data() {
    return {
      startY: 0,
      endY: 0,
      offsetY: 0,
      timer: null,
    };
  },
  computed: {
    ...mapState(["offset", "medisArray", "drag_status", "progress"]),
  },
  mounted() {
    this.$refs.lyric.addEventListener("touchstart", (e) => {
      clearTimeout(this.timer);
      this.startY = e.changedTouches[0].clientY;
      // 歌词不允许跟着音频动
      this.change_scroll_lyric(false);
    });
    this.$refs.lyric.addEventListener("touchmove", (e) => {
      this.endY = e.changedTouches[0].clientY;
      this.offsetY = Math.round((this.endY - this.startY) / 40);
    });
    this.$refs.lyric.addEventListener("touchend", () => {
      this.timer = setTimeout(() => {
        // 歌词允许跟着音频动
        this.change_scroll_lyric(true);
        // 直接滚到对应的歌词
        let times = this.medisArray.map((el) => el.t);
        this.change_offset(nearNumber(times, this.$store.state.progress));
      }, 2000);
    });
  },
  methods: {
    ...mapMutations([
      "change_offset",
      "change_progress",
      "change_scroll_lyric",
    ]),
    // 点击歌词，跳转到对应的歌词
    to_lyric(idx) {
      this.change_offset(idx);
      this.$audio.currentTime = this.medisArray[idx].t;
    },
  },
  watch: {
    // 监听触摸是上托或下拽
    offsetY: {
      handler(newVal, oldVal) {
        let off_num = this.offset;
        if (newVal > oldVal) {
          off_num = this.offset - Math.abs(newVal);
          if (off_num < 0) {
            off_num = 0;
          }
          this.change_offset(off_num);
        } else {
          off_num = this.offset + Math.abs(oldVal);
          if (off_num > this.medisArray.length - 2) {
            off_num = this.medisArray.length - 2;
          }
          this.change_offset(off_num);
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.word_box {
  .song_name {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    .singer {
      display: inline-block;
      line-height: 24px;
      font-size: 15px;
      color: #ccc;
    }
  }
  .song_word {
    margin-top: 15px;
    height: 140px;
    overflow: hidden;
    font-size: 16px;
    .word_translate {
      transition: all 0.3s;
      .words {
        width: 100%;
        height: 28px;
        line-height: 28px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: lightgray;
        padding: 0 10px;
        &.act_style {
          color: #fff;
          transform: scale(1.3);
          font-weight: bold;
          background: linear-gradient(to right, #f00, #fff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}
</style>
